<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <div class="main">
        <div class="top flex_x between pd12">
            <div class="t_left back" >
                <i class="iconfont mr_20">&#xe84f;</i>
            </div>
            <a href="./search.html">
                <div class="t_right algin_center">
                    <img class="mr_20" src="./static/image/Component 22.svg" alt="">
                    <i class="iconfont font_24">&#xe8c4;</i>
                </div>
                
            </a>
        </div>
        <div class="r_content flex_x around pd12">
           <div class="r_top flex_x start">
            <img class="mr_20" src="./static/image/Rectangle 29.png" alt="">
            <div class="flex_y start">
                <span class="font_20">Pop Music in 2023</span>
                <div class="flex_x start font_16 mt_10 algin_center">
                    <span class="mr_10">Leo</span>
                    <i class="iconfont">&#xe7eb;</i>
                </div>
            </div>
           </div>
        </div>
        <div class="content bg_ff pd12">
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">1</span>
                    <div class="flex_y start">
                        <span class="font_16">HEATED</span>
                        <span class="font_10">Ed Sheeran</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">2</span>
                    <div class="flex_y start">
                        <span class="font_16">Keep Me</span>
                        <span class="font_10">Novo Amor</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">3</span>
                    <div class="flex_y start">
                        <span class="font_16">lowkey</span>
                        <span class="font_10">NIKI</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">4</span>
                    <div class="flex_y start">
                        <span class="font_16">Deep Green</span>
                        <span class="font_10">Christian Kuria</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">5</span>
                    <div class="flex_y start">
                        <span class="font_16">Better Now</span>
                        <span class="font_10">BLANKS</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">6</span>
                    <div class="flex_y start">
                        <span class="font_16">Wonderful U</span>
                        <span class="font_10">AGA</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
            <div class="items flex_x between">
                <div class="left flex_x start">
                    <span class="color_red mr_6">7</span>
                    <div class="flex_y start">
                        <span class="font_16">Wonderful U</span>
                        <span class="font_10">AGA</span>
                    </div>
                </div>
                <i class="iconfont font_24">&#xe8c4;</i>
            </div>
        </div>
        <div class="bott pos_f">
            <img class="pos_a" src="./static/image/imgbin_bubble-transparency-and-translucency-png 8.png" alt="">
            <div class="taggle pos_a">
                <div class="t_top flex_x around">
                    <i class="iconfont mt_10">&#xe78a;</i>
                    <i class="iconfont font_24 pause btns" >&#xe624;</i>
                    <i class="iconfont mt_10">&#xe7a5;</i>
                </div>
                <div class="t_bot font_12 mt_16">Thinking Out Loud</div>
            </div>
        </div>
    </div>
     <!-- 底部tab -->
     <div class="tab flex_x around algin_center" style="background-color: #fff;">
       <a href="./discover.html">
        <div class="tab_item flex_y txt_center algin_center ">
            <img src="./static/image/headset.svg" alt="">
            <span class="mt_16">discover</span>
        </div>
       </a>
        <a class="" href="./mine.html">
            <div class="tab_item flex_y txt_center algin_center">

                <img src="./static/image/Vector 2.svg" alt="">
                <span class="mt_16">my</span>

            </div>
        </a>
       <a href="./favorate.html">
        <div class="tab_item flex_y txt_center algin_center">
            <img src="./static/image/vector.svg" alt="">
            <span class="mt_16">Favorite</span>
        </div>
       </a>
    </div>
</body>
<style>
    .main {
        box-sizing: border-box;
        background: linear-gradient(#f4f1e9, #fff);
        height: 100vh;
        padding-top: 40px;
    }

    .r_content {
        flex-wrap: wrap;
    }

    .r_item {
        width: 130px;
        height: 130px;
        margin-bottom: 20px;
    }

    .desc {
        display: inline-block;
        width: 110px;
        height: 19px;
        line-height: 19px;
        padding-left: 4px;
        box-sizing: border-box;
        left: 0;
        bottom: 20px;
        background: rgba(217, 217, 217, 0.55);
        font-size: 11px;
    }

    .bott {
        height: 160px;
        width: 100%;
    }

    .bott img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .taggle {
        bottom: 4px;
        left: 40%;
        color: #888;
    }
    .r_top img{
        width: 128px;
        height: 128px;
    }
    .content{
        width: 100vw;
        height: 40vh;
        overflow: scroll;
        padding: 40px;
        box-sizing: border-box;
        background-color: #fff;
    }
    .items{
        padding: 12px;
        margin-top: 2px;
    }
</style>

</html>